<template>
  <div class="Tfoot">
    <div class="Left" v-if="todayData.nyue">
      <p class="nyueri">{{ todayData.nyue }}{{ todayData.nri }}</p>
      <p class="ganzhinian">
        {{ todayData.ganzhinian }}
      </p>
    </div>
  </div>
  <!-- <button @click="click">获取day的数据</button> -->
</template>

<script setup>
import axios from 'axios'
import { ref, inject, watch } from 'vue'
const dateValue = inject('dateValue', {
  year: {
    type: String,
  },
  month: {
    type: String,
  },
  day: {
    type: String,
  },
})

let todayData = ref({})

const needNextData = async () => {
  const response = await axios.get(
    `https://cn.apihz.cn/api/time/getzdday.php?id=10004357&key=wannianli98&nian=${dateValue.value.year}&yue=${dateValue.value.month}&ri=${dateValue.value.day}`
  )
  todayData.value = response.data
}
watch(
  () => [dateValue.value.year, dateValue.value.month, dateValue.value.day],
  needNextData
)
needNextData()
/* const click = () => {
  console.log(dateValue.value.year, dateValue.value.month, dateValue.value.day)
} */
</script>

<style scoped>
.Tfoot {
  display: flex;
  align-items: center;
  width: 350px;
  height: 80px;
  padding-inline: 20px;
  border-radius: 0 0 20px 20px;
  background-color: #f0f0f0;
}
.nyueri {
  font-size: 30px;
  font-family: '宋体';
  font-weight: bold;
}
.ganzhinian {
  font-size: 20px;
  font-family: '宋体';
  font-weight: bold;
}
</style>
